<template>
    <div class="app-container">

        <!--搜索表单-->
        <el-form :inline="true" :model="searchEmp" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入员工姓名"
                />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="queryParams.gender" placeholder="请选择">
                    <el-option label="男" value="1"/>
                    <el-option label="女" value="2"/>
                </el-select>
            </el-form-item>

            <el-form-item label="入职时间">
                <el-date-picker
                    v-model="entrydate"
                    clearable
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    placeholder="选择日期"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 400px; margin-left: 20px"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="info" @click="clear">清空</el-button>
            </el-form-item>
        </el-form>

        <!--按钮-->
        <el-row>
            <el-button type="danger" size="medium" @click="deleteByIds">- 批量删除</el-button>
            <el-button type="primary" size="medium" @click="dialogVisible = true; emp = { image: ''};">+ 新增员工
            </el-button>
            <el-button type="primary" size="medium" @click="exportExcelFile">导出表格</el-button>
        </el-row>

        <!--添加数据对话框表单-->
        <el-dialog ref="form" title="编辑员工" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="emp" label-width="80px" size="mini">
                <el-form-item label="用户名">
                    <el-input v-model="emp.username"/>
                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="emp.name"/>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="emp.gender" placeholder="请选择" style="width:100%">
                        <el-option
                            v-for="item in genderList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="头像">
<!--                    <el-upload-->
<!--                        class="avatar-uploader"-->
<!--                        action="/api/upload"-->
<!--                        :headers="token"-->
<!--                        name="image"-->
<!--                        :show-file-list="false"-->
<!--                        :on-success="handleAvatarSuccess"-->
<!--                        :before-upload="beforeAvatarUpload"-->
<!--                    >-->
<!--                        <img v-if="emp.image" :src="'api/' + emp.image" class="avatar">-->
<!--                        <i v-else class="el-icon-plus avatar-uploader-icon"/>-->
<!--                    </el-upload>-->
                    <image-upload v-model="emp.image" @over="beforeAvatarUpload" />
                </el-form-item>

                <el-form-item label="职位">
                    <el-select v-model="emp.job" placeholder="请选择" value-key="emp.job" style="width:100%">
                        <el-option
                            v-for="item in jobList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="入职日期">
                    <el-date-picker
                        v-model="emp.entrydate"
                        clearable
                        type="date"
                        placeholder="选择日期"
                        size="small"
                        style="width:100%"
                    />
                </el-form-item>

                <el-form-item label="归属部门">
                    <el-select v-model="emp.deptId" placeholder="请选择" style="width:100%">
                        <el-option
                            v-for="item in deptList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add">提交</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--表格-->
        <template>
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="name" label="姓名" align="center"/>
                <el-table-column prop="imageUrl" label="头像" align="center">
                    <template slot-scope="{ row }">
                        <el-image
                            style="width: auto; height: 70px; border: none; cursor: pointer"
                            :src="'api/'+row.imageUrl"
                        />
                    </template>
                </el-table-column>

                <el-table-column align="center" label="性别">
                    <template slot-scope="scope">
            <span style="margin-right: 10px">
              {{ scope.row.gender == '1' ? '男' : '女' }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="职位">
                    <template slot-scope="scope">
                        <span v-if="scope.row.job == 1" style="margin-right: 10px">班主任</span>
                        <span v-if="scope.row.job == 2" style="margin-right: 10px">讲师</span>
                        <span v-if="scope.row.job == 3" style="margin-right: 10px">学工主管</span>
                        <span v-if="scope.row.job == 4" style="margin-right: 10px">教研主管</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="入职日期">
                    <template slot-scope="scope">
                        {{ dayjs(scope.row.entrydate).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="最后操作时间">
                    <template slot-scope="scope">
                        {{ dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" @click="update(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--分页工具条-->
        <el-pagination
            v-show="totalCount > 0"
            :background="background"
            :total="totalCount"
            :current-page="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
import {page, add, update, deleteById, selectById, exportExcel} from '@/api/emp.js'
import {findAll} from '@/api/dept.js'
import {getToken} from '@/utils/auth'
import dayjs from 'dayjs'

export default {
    data() {
        return {
            background: true,
            queryParams: {
                name: '',
                gender: null,
                pageNum: 1,
                pageSize: 10,
                orderByColumn: 'entryDate',
                isAsc: 'desc'
            },
            // 总记录数
            totalCount: 0,
            // 添加数据对话框是否展示的标记
            dialogVisible: false,
            // 品牌模型数据
            searchEmp: {
                name: '',
                gender: ''
            },
            emp: {
                image: ''
            },
            deptList: [],
            genderList: [{ id: 1, name: '男' }, { id: 2, name: '女' }],
            jobList: [
                {
                    id: 1,
                    name: '班主任'
                },
                {
                    id: 2,
                    name: '讲师'
                },
                {
                    id: 3,
                    name: '学工主管'
                },
                {
                    id: 4,
                    name: '教研主管'
                }
            ],

            beginTime: '',
            endTime: '',
            entrydate: '',

            // 被选中的id数组
            selectedIds: [],
            // 复选框选中数据集合
            multipleSelection: [],
            // 表格数据
            tableData: [],
            token: { token: getToken() }
        }
    },
    watch: {
        entrydate(val) {
            if (val && val.length >= 2) {
                this.beginTime = val[0]
                this.endTime = val[1]
            } else {
                this.beginTime = ''
                this.endTime = ''
            }
        }
    },
    mounted() {
        this.page() // 当页面加载完成后，发送异步请求，获取数据
        findAll().then((result) => {
            this.deptList = result.data
        })
    },

    methods: {
        dayjs,
        // 查询分页数据
        page() {
            page({
                ...this.queryParams,
                beginEntryDate: this.beginTime,
                endEntryDate: this.endTime,
            }).then((res) => {
                this.totalCount = res.total
                this.tableData = res.rows
            })
        },

        // 复选框选中后执行的方法
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 查询方法
        onSubmit() {
            this.queryParams.pageNum = 1
            this.page()
        },

        clear() {
            this.queryParams = { 
                name: '', 
                gender: '',
                pageNum: 1,
                pageSize: 10,
                orderByColumn: 'entryDate',
                isAsc: 'desc'
            }
            this.beginTime = ''
            this.endTime = ''
            this.entrydate = ''
            this.page()
        },
        // 添加数据
        add() {
            let operator

            if (this.emp.id) {
                // 修改
                operator = update(this.emp)
            } else {
                operator = add(this.emp)
            }

            operator.then((resp) => {
                this.dialogVisible = false
                this.page()
                this.$message({ message: '恭喜你，保存成功', type: 'success' })
                this.emp = { image: '' }
            })
        },
        update(id) {
            // 1. 打开窗口
            this.dialogVisible = true
            // 2. 发送请求

            selectById(id).then((result) => {
                this.emp = result.data
            })
        },

        // 分页
        handleSizeChange(val) {
            // 重新设置每页显示的条数
            this.queryParams.pageSize = val
            this.page()
        },

        handleCurrentChange(val) {
            // 重新设置当前页码
            this.queryParams.pageNum = val
            this.page()
        },

        // 删除员工信息
        deleteById(id) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 2. 发送AJAX请求
                deleteById(id).then((resp) => {
                    // 删除成功
                    this.$message.success('恭喜你，删除成功')
                    this.page()
                })
            }).catch(() => {
                // 用户点击取消按钮
                this.$message.info('已取消删除')
            })
        },

        // 批量删除员工信息
        deleteByIds() {
            // 弹出确认提示框
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 用户点击确认按钮
                // 1. 创建id数组, 从 this.multipleSelection 获取即可
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.selectedIds[i] = this.multipleSelection[i].id
                }

                // 2. 发送AJAX请求
                deleteById(this.selectedIds).then((resp) => {
                    // 删除成功
                    this.$message.success('恭喜你，删除成功')
                    this.page()
                })
            }).catch(() => {
                // 用户点击取消按钮
                this.$message.info('已取消删除')
            })
        },

        // 文件上传相关
        handleAvatarSuccess(res, file) {
            console.log(res)
            this.emp.image = res.data
        },
        beforeAvatarUpload() {
            console.log(this.emp.image)
        },
    exportExcelFile() {
      exportExcel().then(response => {
        const blob = new Blob(
          [response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '员工数据.xlsx';
        link.click();
        window.URL.revokeObjectURL(url);
      }).catch(error => {
        this.$message.error('导出失败：' + (error.response?.data?.msg || '网络错误'));
      });

    },
  }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
